new Vue({
    el: '#app',
    data: {
        loading: false,
        tableData: [],//列表数据源
        queryData: { //列表查询数据源
            name:'', //商品名字
            pid:'', //商品id
            status:'',//商品状态
            pageNum: 1,
            pageSize: 10,
        },
        count: 0, //列表数据总数
        statusList:[{//商品状态数据源
            value: -1,
            label: '所有'
        }, {
            value: 1,
            label: '已上架'
        }, {
            value: 0,
            label: '未上架'
        }],
        detailInfo:null,//商品详情数据源
        dialogVisible:false,//控制 商品详情弹窗的显示/隐藏
        addForm:{//新增/修改 商品数据源
            id:'', //商品id
            name:'', //商品名称
            picture:'', //商品封面
            picture_show:'', // 商品封面 显示用的
            imageBase64:'', // 商品封面 上传用的
            price:'',//商品价格
            rebate:'',//商品佣金
            category:'',//商品分类
            categoryCode:'',//商品分类code
            status:1,//商品状态
            recommend:0,//是否推荐 1:推荐 0:不推荐
            description:'',//商品描述
            mainPicture:'', //商品主图
            mainPicture_show:'',//商品主图 显示用的
            mainImageBase64:'',//商品主图 上传用的
        },
        categoryList:[] //商品分类列表


    },
    created() {
        this.getList();//调用商品列表接口
        this.getCategoryList()//调用商品分类接口

    },
    methods: {
        //将上传的封面转化为base64
        HttpRequest(data){
            this.processImageFile(data.file,  (res) => {
                console.log(res);
                this.addForm.imageBase64 = res.data;
                this.addForm.picture_show = res.image;

            });
        },
        //将上传的主图转化为base64
        HttpRequest2(data){
            this.processImageFile(data.file,  (res) => {
                console.log(res);
                this.addForm.mainImageBase64 = res.data;
                this.addForm.mainPicture_show = res.image;

            });
        },
        /**
         * base64处理图片
         */
        processImageFile: function(file, callback) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = e.target.result;
                index = data.indexOf(';base64,');
                if ((index >= 0) && (index < 100)) {
                    callback({
                        image: data,
                        data: data.substring(index + 8)
                    });
                } else {
                    alert('Browser does not support data URL!');
                }
            };
            reader.readAsDataURL(file);
        },
        // 图片 上传前的类型判断
        beforeAvatarUpload(file) {
            var fileName = file.name.lastIndexOf(".");//取到文件名开始到最后一个点的长度
            var fileNameLength = file.name.length;//取到文件名长度
            var fileFormat = file.name.substring(fileName + 1, fileNameLength);
            var isImg = ['jpg', 'png', 'jpeg'].indexOf(fileFormat.toLowerCase()) != -1;
            if (!isImg) {
                this.$message.error('上传文件只能是 jpg,png,jpeg格式!');
            }
            return isImg;
        },
        // 商品修改按钮
        updateClick(row){
            this.getDetail(row.id)
        },
        //下架
        downClick(row){
            this.doSale(row.id)
        },
        //删除
        delClick(row){
            this.$confirm(`您确定要删除"${row.name}"吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.delete(row.id)
            }).catch(() => {

            });
        },
        //新建按钮
        addClick(){
            this.dialogVisible = true
            this.addForm.id =  ""
            this.addForm.name =  ""
            this.addForm.picture =  ""
            this.addForm.picture_show =  ""
            this.addForm.imageBase64 =  ""
            this.addForm.price =  ""
            this.addForm.rebate =  ""
            this.addForm.categoryCode =  ""
            this.addForm.category =  ""
            this.addForm.status =  1
            this.addForm.recommend =  0
            this.addForm.description =  ""
            this.addForm.mainPicture = ""
            this.addForm.mainPicture_show =  ""
            this.addForm.mainImageBase64 =  ""
        },
        //确定修改 按钮
        onSure(){
            console.log(this.addForm);
            this.update()
        },
        // 分页监听事件
        handleCurrentChange(val) {
            this.queryData.page = val
            this.getList()
        },
        // 分页监听事件
        handleSizeChange(val) {
            this.queryData.page = 1
            this.queryData.limit = val
            this.getList()
        },
        //获取商品列表接口
        getList() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/product/list',
                data: this.queryData,
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.tableData = res.data.items
                        this.count = res.data.itemsTotalCount

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //获取商品分类接口
        getCategoryList() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/product/category',
                data: this.queryData,
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.categoryList = res.data

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //查看商品详情接口
        getDetail(id) {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/product/detail',
                data: {id:id},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.detailInfo = res.data

                        this.addForm.id =  this.detailInfo.id
                        this.addForm.name =  this.detailInfo.name
                        this.addForm.picture =  this.detailInfo.picture
                        this.addForm.picture_show =  ""
                        this.addForm.imageBase64 =  ""
                        this.addForm.price =  this.detailInfo.price
                        this.addForm.rebate =  this.detailInfo.rebate
                        this.addForm.categoryCode = this.detailInfo.category
                        this.categoryList.forEach((item)=>{
                            console.log(item.code , this.addForm.categoryCode,item.code == this.addForm.categoryCode)
                            if(item.code == this.addForm.categoryCode){
                                this.addForm.category = item.id
                            }
                        })
                        this.addForm.status =  this.detailInfo.status
                        this.addForm.recommend =  this.detailInfo.recommend
                        this.addForm.description =  this.detailInfo.description
                        this.addForm.mainPicture =  this.detailInfo.mainPicture
                        this.addForm.mainPicture_show =  ""
                        this.addForm.mainImageBase64 =  ""
                        this.dialogVisible = true

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //分类事件change 触发事件
        onChangeCategoryList(){
            this.categoryList.forEach((item)=>{
                if(item.code == this.addForm.categoryCode){
                    this.addForm.category = item.id
                }
            })
        },
        //商品更新接口
        update() {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/product/update',
                data: this.addForm,
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.$message.success('修改成功！')
                        this.dialogVisible = false
                        this.getList();
                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //商品 上架/下架
        doSale(id) {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/product/doSale',
                data: {id:id},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.$message.success('修改成功！')
                        this.loading = false
                        this.getList();

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },
        //商品删除
        delete(id) {
            this.loading = true
            $.ajax({
                type: 'post',
                url: '/product/delete',
                data: {id:id},
                dataType: 'json',
                success: (res, s, xhr) => {
                    if (res.code == 0) {
                        this.$message.success('删除成功！')
                        this.loading = false
                        this.getList();

                    } else {
                        this.$message.error(res.msg || '网络异常')
                    }
                    this.loading = false
                },
                error: (xhr, s, err) => {
                    console.log(xhr, s, err)
                    this.$message.error(err.msg || '网络异常')
                    this.loading = false
                    return false;
                }
            });
        },

    }
})
